<template>
  <div class="re_table">
    <el-table :data="tableData" stripe :style="reStyle" :header-cell-style="headerCellStyle">
      <el-table-column
        v-for="(item, index) in columns"
        :key="item.prop + index"
        :prop="item.prop"
        :show-overflow-tooltip="item.overflow ? false :true"
        :label="item.label"
        :width="item.width"
        :align="item.align ? item.align : 'center'"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" :name="item.slot" :row="scope.row"></slot>
          <span v-else>{{ scope.row[item.prop] || "-" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="currPage || currPage !== 0" class="pagelate">
      <el-pagination
        :currentPage="currPage"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="float: right"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TestPage',
  props: {
    currentRowKey: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: String,
      default: ''
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 10
    },
    reStyle: {
      type: String,
      default: 'width: 100%'
    },
    headerCellStyle: {
      type: Object,
      default: () => {
        return { background: '#e7eaf0', color: '#606266' };
      }
    }
  },
  data() {
    return {
      currPage: this.page,
      pageSize: this.size
    };
  },
  methods: {
    pageChange(val) {
      this.$emit('page-change', val);
    },
    sizeChange(val) {
      this.$emit('page-change', val);
    }
  }
  //   emits: ['pageChange', 'sizeChange'],
  //   setup(props, { emit }) {
  //     let currPage = ref(props.page);
  //     let pageSize = ref(props.size);
  //     let actions = reactive({
  //       sizeChange: val => {
  //         emit('sizeChange', val);
  //       },
  //       pageChange: val => {
  //         emit('pageChange', val);
  //       }
  //     });
  //     watch(
  //       () => props.page,
  //       (count, prevCount) => {
  //         if (count !== prevCount) {
  //           currPage.value = count;
  //         }
  //       }
  //     );
};
</script>
<style lang="scss" scoped>
.pagelate {
  text-align: center;
  padding-top: 10px;
}
</style>
<style lang="scss">
</style>
